<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="设备编号" prop="deviceNo">
          <el-input v-model="queryParams.deviceNo" placeholder="请输入设备编号" clearable />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
        </el-form-item>
        <el-form-item label="机器类型" prop="machineTypeId">
          <el-select v-model="queryParams.machineTypeId" placeholder="请选择机器类型" clearable>
            <el-option v-for="item in machineTypeOptions" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option label="未使用" :value="0" />
            <el-option label="离线" :value="1" />
            <el-option label="在线" :value="2" />
            <el-option label="故障" :value="3" />
            <el-option label="维护中" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="device-container">
      <div class="device-header">
        <el-button type="primary" @click="openForm()">
          <el-icon><Plus /></el-icon>
          新增
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>

      <!-- 按类型分组的设备列表 -->
      <div v-for="(group, typeCode) in groupedDevices" :key="typeCode" class="device-group">
        <div class="group-header">
          <h3 class="group-title">{{ group.typeName }}</h3>
          <el-tag type="info" effect="plain">{{ group.devices.length }}台设备</el-tag>
        </div>
        <el-row :gutter="20" class="device-list">
          <el-col v-for="item in group.devices" :key="item.id" :span="12" class="device-col">
            <el-card class="device-card" :body-style="{ padding: '0px' }" shadow="hover">
              <div class="device-card-content">
                <div class="device-image-wrapper">
                  <template v-if="item.imgUrl">
                    <el-image :src="item.imgUrl" :preview-src-list="[item.imgUrl]" fit="contain" class="device-image" :preview-teleported="true">
                      <template #error>
                        <div class="image-slot">
                          <el-icon><Picture /></el-icon>
                          <span>暂无图片</span>
                        </div>
                      </template>
                    </el-image>
                  </template>
                  <template v-else>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                      <span>暂无图片</span>
                    </div>
                  </template>
                  <div class="device-status">
                    <el-tag :type="getStatusType(item.status)" effect="dark" size="small">
                      {{ getStatusName(item.status) }}
                    </el-tag>
                  </div>
                </div>
                <div class="device-info">
                  <h3 class="device-name">{{ item.deviceName }}</h3>
                  <div class="device-details">
                    <div class="detail-item">
                      <el-icon><Document /></el-icon>
                      <span>编号：{{ item.deviceNo }}</span>
                    </div>
                    <div class="detail-item">
                      <el-icon><Key /></el-icon>
                      <span>序列号：{{ item.sn }}</span>
                    </div>
                    <div class="detail-item">
                      <el-icon><Monitor /></el-icon>
                      <span>型号：{{ item.model }}</span>
                    </div>
                    <div class="detail-item">
                      <el-icon><Box /></el-icon>
                      <span>货道：{{ item.channelCount }}</span>
                      <el-tooltip content="在设备详情中可以修改每个通道的最大容量" placement="top" effect="light">
                        <el-icon class="info-icon"><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="device-time">
                    <div class="time-item">
                      <el-icon><Calendar /></el-icon>
                      <span>创建：{{ item.createTime }}</span>
                    </div>
                    <div class="time-item">
                      <el-icon><Timer /></el-icon>
                      <span>更新：{{ item.updateTime }}</span>
                    </div>
                  </div>
                  <div class="device-actions">
                    <div class="action-row">
                      <el-button type="primary" link @click="openDetail(item.id)">
                        <el-icon><View /></el-icon>
                        查看
                      </el-button>
                      <el-divider direction="vertical" />
                      <el-button type="primary" link @click="openForm(item.id)">
                        <el-icon><Edit /></el-icon>
                        修改
                      </el-button>
                    </div>
                    <div class="action-row">
                      <el-button type="success" link :disabled="item.status === 2" @click="handleChannel(item)">
                        <el-icon><Box /></el-icon>
                        通道管理
                      </el-button>
                      <el-divider direction="vertical" />
                      <el-button type="danger" link :disabled="item.status === 2" @click="handleDelete(item.id)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="pagination-container">
        <pagination v-if="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
      </div>
    </div>

    <!-- 表单弹窗 -->
    <el-dialog v-model="dialogVisible" :title="form.id ? '修改设备' : '新增设备'" width="600px" append-to-body destroy-on-close>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备编号" prop="deviceNo">
          <el-input v-model="form.deviceNo" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="序列号" prop="sn">
          <el-input v-model="form.sn" placeholder="请输入序列号" />
        </el-form-item>
        <el-form-item label="设备型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="机器类型" prop="machineTypeId">
          <el-select v-model="form.machineTypeId" placeholder="请选择机器类型" clearable>
            <el-option v-for="item in machineTypeOptions" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">未使用</el-radio>
            <el-radio :label="1">离线</el-radio>
            <el-radio :label="2">在线</el-radio>
            <el-radio :label="3">故障</el-radio>
            <el-radio :label="4">维护中</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备图片" prop="imgUrl">
          <image-upload v-model="form.imgUrl" :is-show-tip="false" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :disabled="qrsc" @click="submitForm">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 通道管理弹窗 -->
    <el-dialog
      v-model="channelDialogVisible"
      title="通道管理"
      width="500px"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div v-loading="channelLoading">
        <el-alert
          title="提示：设置通道总数后，可以在设备详情中修改每个通道的最大容量,容量默认是10"
          type="info"
          :closable="false"
          show-icon
          class="channel-alert"
        />
        <el-form ref="channelFormRef" :model="channelForm" :rules="channelRules" label-width="100px">
          <el-form-item label="通道总数" prop="channelCount">
            <el-input-number v-model="channelForm.channelCount" :min="0" :max="999" placeholder="请输入通道总数" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitChannelForm">确 定</el-button>
          <el-button @click="handleCloseChannelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="设备详情" append-to-body destroy-on-close>
      <el-skeleton :loading="detailLoading" animated>
        <template #template>
          <div style="padding: 20px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div style="display: flex; margin-top: 20px">
              <el-skeleton-item variant="text" style="margin-right: 16px; width: 30%" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
            <div style="display: flex; margin-top: 20px">
              <el-skeleton-item variant="text" style="margin-right: 16px; width: 30%" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </div>
        </template>
        <template #default>
          <div class="detail-container">
            <div class="detail-header">
              <div class="device-title">
                <h2>{{ detailData.deviceName }}</h2>
                <el-tag :type="getStatusType(detailData.status)" effect="dark" size="large">
                  {{ getStatusName(detailData.status) }}
                </el-tag>
              </div>
              <div class="device-basic">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="设备编号">{{ detailData.deviceNo }}</el-descriptions-item>
                  <el-descriptions-item label="序列号">{{ detailData.sn }}</el-descriptions-item>
                  <el-descriptions-item label="型号">{{ detailData.model }}</el-descriptions-item>
                  <el-descriptions-item label="通道总数">{{ detailData.channelCount }}</el-descriptions-item>
                  <el-descriptions-item label="设备类型">
                    <el-tag type="success" effect="plain">
                      {{ detailData.deviceType?.typeName }}
                    </el-tag>
                    <el-tooltip :content="detailData.deviceType?.description" placement="top" effect="light">
                      <el-icon class="info-icon"><InfoFilled /></el-icon>
                    </el-tooltip>
                  </el-descriptions-item>
                  <el-descriptions-item label="类型编码">{{ detailData.deviceType?.typeCode }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
                  <el-descriptions-item label="更新时间">{{ detailData.updateTime }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>

            <div class="detail-section">
              <div class="section-header">
                <h3>设备状态</h3>
              </div>
              <template v-if="detailData.deviceStatus">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="温度">{{ detailData.deviceStatus?.temperature }}°C</el-descriptions-item>
                  <el-descriptions-item label="湿度">{{ detailData.deviceStatus?.humidity }}%</el-descriptions-item>
                  <el-descriptions-item label="信号强度">{{ detailData.deviceStatus?.signalStrength }}%</el-descriptions-item>
                  <el-descriptions-item label="最后在线时间">{{ detailData.deviceStatus?.lastOnlineTime }}</el-descriptions-item>
                  <el-descriptions-item label="最后维护时间">{{ detailData.deviceStatus?.lastMaintenanceTime }}</el-descriptions-item>
                  <el-descriptions-item label="维护周期">
                    <div class="maintenance-cycle">
                      <span>{{ detailData.deviceStatus?.maintenanceCycle }}天</span>
                      <el-button type="primary" link @click="handleEditMaintenanceCycle">
                        <el-icon><Edit /></el-icon>
                        修改
                      </el-button>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </template>
              <template v-else>
                <div class="empty-status">
                  <span class="empty-text">暂无投放使用</span>
                </div>
              </template>
            </div>

            <div class="detail-section">
              <div class="section-header">
                <h3>通道信息</h3>
                <span class="section-count">共 {{ detailData.deviceChannel?.length || 0 }} 个通道</span>
              </div>
              <template v-if="detailData.deviceChannel?.length">
                <el-alert title="提示：点击通道容量旁的编辑按钮可以修改最大容量" type="info" :closable="false" show-icon class="channel-alert" />
                <el-table :data="detailData.deviceChannel" border style="width: 100%">
                  <el-table-column prop="channelNo" label="通道编号" width="100" />
                  <el-table-column prop="channelPosition" label="通道位置" width="100" />
                  <el-table-column prop="channelType" label="通道类型" width="100">
                    <template #default="{ row }">
                      <el-tag :type="row.channelType === 1 ? 'info' : 'warning'" size="small">
                        {{ row.channelType === 1 ? '普通通道' : '特殊通道' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="maxCapacity" label="最大容量" width="150">
                    <template #default="{ row }">
                      <div class="capacity-cell">
                        <div class="capacity-info">
                          <span>{{ row.maxCapacity }}</span>
                          <el-tooltip content="点击修改最大容量" placement="top" effect="light">
                            <el-icon class="capacity-icon"><InfoFilled /></el-icon>
                          </el-tooltip>
                        </div>
                        <el-button type="primary" link :disabled="detailData.status === 2" class="edit-capacity-btn" @click="handleEditCapacity(row)">
                          <el-icon><Edit /></el-icon>
                          修改
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                      <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
                        {{ row.status === 1 ? '正常' : '异常' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <template v-else>
                <el-empty description="暂无通道信息">
                  <el-button type="primary" @click="handleGoToChannel">前往添加</el-button>
                </el-empty>
              </template>
            </div>

            <div class="detail-section">
              <div class="section-header">
                <h3>库存信息</h3>
                <span class="section-count">共 {{ detailData.deviceStock?.length || 0 }} 个商品</span>
              </div>
              <template v-if="detailData.deviceStock?.length">
                <el-table :data="detailData.deviceStock" border style="width: 100%">
                  <el-table-column prop="channelId" label="通道ID" width="100" />
                  <el-table-column prop="productId" label="商品ID" width="100" />
                  <el-table-column prop="stockQuantity" label="当前库存" width="100">
                    <template #default="{ row }">
                      <div class="stock-cell">
                        <span
                          :class="{
                            'stock-warning': row.stockQuantity <= row.alertQuantity,
                            'stock-danger': row.stockQuantity > row.maxQuantity
                          }"
                        >
                          {{ row.stockQuantity }}
                        </span>
                        <el-tooltip
                          v-if="row.stockQuantity > row.maxQuantity"
                          :content="`当前库存(${row.stockQuantity})已超过最大容量(${row.maxQuantity})`"
                          placement="top"
                          effect="light"
                        >
                          <el-icon class="warning-icon"><Warning /></el-icon>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="maxQuantity" label="最大库存" width="100" />
                  <el-table-column prop="minQuantity" label="最小库存" width="100" />
                  <el-table-column prop="alertQuantity" label="预警库存" width="100" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">
                      <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
                        {{ row.status === 1 ? '正常' : '异常' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <template v-else>
                <el-empty description="暂无库存信息">
                  <el-button type="primary" @click="handleGoToStock">前往添加</el-button>
                </el-empty>
              </template>
            </div>
          </div>
        </template>
      </el-skeleton>
    </el-dialog>

    <!-- 修改通道容量弹窗 -->
    <el-dialog
      v-model="capacityDialogVisible"
      title="修改通道容量"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div v-loading="capacityLoading">
        <el-form ref="capacityFormRef" :model="capacityForm" :rules="capacityRules" label-width="100px">
          <el-form-item label="通道编号" prop="channelNo">
            <span>{{ capacityForm.channelNo }}</span>
          </el-form-item>
          <el-form-item label="通道位置" prop="channelPosition">
            <span>{{ capacityForm.channelPosition }}</span>
          </el-form-item>
          <el-form-item label="当前库存" prop="currentStock">
            <span :class="{ 'stock-warning': capacityForm.currentStock > capacityForm.maxCapacity }">
              {{ capacityForm.currentStock }}
            </span>
            <el-tooltip
              v-if="capacityForm.currentStock > capacityForm.maxCapacity"
              :content="`当前库存(${capacityForm.currentStock})已超过最大容量(${capacityForm.maxCapacity})`"
              placement="top"
              effect="light"
            >
              <el-icon class="warning-icon"><Warning /></el-icon>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="最大容量" prop="maxCapacity">
            <el-input-number v-model="capacityForm.maxCapacity" :min="capacityForm.currentStock" :max="999" placeholder="请输入最大容量" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitCapacityForm">确 定</el-button>
          <el-button @click="handleCloseCapacityDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改维护周期弹窗 -->
    <el-dialog v-model="maintenanceCycleDialogVisible" title="修改维护周期" append-to-body destroy-on-close>
      <el-form ref="maintenanceCycleFormRef" :model="maintenanceCycleForm" :rules="maintenanceCycleRules" label-width="100px">
        <el-form-item label="维护周期" prop="maintenanceCycle">
          <el-input-number v-model="maintenanceCycleForm.maintenanceCycle" :min="1" :max="365" placeholder="请输入维护周期" />
          <span class="unit-text">天</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitMaintenanceCycle">确 定</el-button>
          <el-button @click="maintenanceCycleDialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Search,
  Refresh,
  Plus,
  Download,
  Edit,
  Delete,
  Picture,
  Document,
  Key,
  Monitor,
  Box,
  Calendar,
  Timer,
  View,
  InfoFilled,
  Warning
} from '@element-plus/icons-vue';
import { getDeviceList, getDeviceDetail, createDevice, updateDevice, deleteDevice, exportDevice, updateCount } from '@/api/vending/device';
import { updateDeviceStatus, addDeviceStatus, getDeviceStatus } from '@/api/vending/device/status';
import { updateChannel } from '@/api/vending/channel';
import { listMachineType } from '@/api/vending/machineType';
import type { DeviceVO, DeviceForm, DeviceResponse, DeviceStatusQuery } from '@/api/vending/device/types';
import type { ChannelForm } from '@/api/vending/channel/types';
import type { MachineTypeVO } from '@/api/vending/machineType/types';
import { debounce } from 'lodash-es';
import { useRouter } from 'vue-router';

const loading = ref(false);
const list = ref<DeviceListItem[]>([]);
const total = ref(0);
const dialogVisible = ref(false);
const queryFormRef = ref();
const formRef = ref();
const channelDialogVisible = ref(false);
const channelFormRef = ref();
const detailDialogVisible = ref(false);
const maintenanceCycleFormRef = ref();
const qrsc = ref(false);
const detailData = ref<DeviceDetail>({
  id: undefined,
  deviceName: '',
  deviceNo: '',
  sn: '',
  model: '',
  status: 0,
  channelCount: 0,
  createTime: '',
  updateTime: '',
  deviceChannel: [],
  deviceStock: [],
  deviceStatus: undefined,
  deviceType: undefined
});
const detailLoading = ref(false);
const capacityDialogVisible = ref(false);
const capacityFormRef = ref();
const capacityForm = reactive({
  id: undefined as number | undefined,
  channelNo: '',
  channelPosition: '',
  maxCapacity: 0,
  currentStock: 0
});
const channelLoading = ref(false);
const capacityLoading = ref(false);
const machineTypeOptions = ref<MachineTypeVO[]>([]);

const queryParams = reactive<DeviceQuery>({
  pageNum: 1,
  pageSize: 10,
  deviceNo: '',
  deviceName: '',
  machineTypeId: undefined,
  status: undefined
});

const form = reactive<DeviceForm>({
  deviceNo: '',
  deviceName: '',
  sn: '',
  model: '',
  machineTypeId: undefined,
  status: 0,
  managerId: 0,
  channelCount: 0
});

const rules = {
  deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
  deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  sn: [{ required: true, message: '请输入序列号', trigger: 'blur' }],
  model: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
  machineTypeId: [{ required: true, message: '请选择机器类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
};

const channelForm = reactive({
  id: undefined as number | undefined,
  channelCount: 0
});

const channelRules = {
  channelCount: [{ required: true, message: '请输入通道总数', trigger: 'blur' }]
};

const defaultImage = 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png';

interface CapacityRules {
  maxCapacity: Array<{
    required?: boolean;
    message?: string;
    trigger?: string;
    type?: string;
    min?: number;
    max?: number;
    validator?: (rule: any, value: any, callback: any) => void;
  }>;
}

const capacityRules = reactive<CapacityRules>({
  maxCapacity: [
    { required: true, message: '请输入最大容量', trigger: 'blur' },
    { type: 'number', min: 1, max: 999, message: '容量范围在1-999之间', trigger: 'blur' },
    {
      validator: (rule: any, value: number, callback: any) => {
        if (value < capacityForm.currentStock) {
          callback(new Error(`最大容量不能小于当前库存(${capacityForm.currentStock})`));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const router = useRouter();

const getMachineTypeList = async () => {
  try {
    const res = await listMachineType({});
    machineTypeOptions.value = res.rows;
  } catch (error) {
    console.error('获取机器类型列表失败:', error);
  }
};

const getList = async () => {
  loading.value = true;
  try {
    const res = await getDeviceList(queryParams);
    // console.log(res)
    list.value = res.rows;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
};

const debouncedGetList = debounce(() => {
  getList();
}, 300);

const handleQuery = () => {
  queryParams.pageNum = 1;
  debouncedGetList();
};

const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

const openForm = async (id?: number) => {
  dialogVisible.value = true;
  // 重置表单数据
  Object.assign(form, {
    id: undefined,
    deviceNo: '',
    deviceName: '',
    sn: '',
    model: '',
    machineTypeId: undefined,
    status: 0,
    imgUrl: '',
    managerId: 0,
    channelCount: 0
  });

  if (id) {
    const res = await getDeviceDetail(id, 0);
    // console.log(res);
    if (res.code == 200) {
      form.id = res.data.id;
      form.deviceNo = res.data.deviceNo;
      form.deviceName = res.data.deviceName;
      form.sn = res.data.sn;
      form.model = res.data.model;
      form.machineTypeId = res.data.machineTypeId;
      form.status = res.data.status;
      form.managerId = res.data.managerId;
      form.channelCount = res.data.channelCount;
      form.imgUrl = res.data.imgUrl;
    }
  }
};

const submitForm = async () => {
  await formRef.value?.validate();
  qrsc.value = true;
  if (form.id) {
    // console.log(form);
    await updateDevice(form);
    ElMessage.success('修改成功');
  } else {
    await createDevice(form);
    ElMessage.success('新增成功');
  }
  qrsc.value = false;
  dialogVisible.value = false;
  getList();
};

const handleDelete = async (id: number) => {
  try {
    await ElMessageBox.confirm('确认要删除该设备吗？', '提示', {
      type: 'warning'
    });
    await deleteDevice(id);
    ElMessage.success('删除成功');
    getList();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

const handleExport = () => {
  exportDevice(queryParams);
};

const getStatusType = computed(() => (status: number) => {
  switch (status) {
    case 0:
      return 'info';
    case 1:
      return 'warning';
    case 2:
      return 'success';
    case 3:
      return 'danger';
    case 4:
      return 'warning';
    default:
      return 'info';
  }
});

const getStatusName = computed(() => (status: number) => {
  switch (status) {
    case 0:
      return '未使用';
    case 1:
      return '离线';
    case 2:
      return '在线';
    case 3:
      return '故障';
    case 4:
      return '维护中';
    case 5:
      return '待维护';
    default:
      return '未知';
  }
});

const handleChannel = (row: DeviceVO) => {
  if (row.status === 2) {
    // 修改为在线状态时禁用
    ElMessage.warning('在线状态的设备无法修改通道数');
    return;
  }
  channelDialogVisible.value = true;
  channelForm.id = row.id;
  channelForm.channelCount = row.channelCount;
};

const submitChannelForm = async () => {
  channelLoading.value = true;
  try {
    await channelFormRef.value?.validate();
    await updateCount(channelForm.id, channelForm.channelCount);
    ElMessage.success('修改成功');
    channelDialogVisible.value = false;
    getList();
  } finally {
    channelLoading.value = false;
  }
};

const openDetail = async (id: number) => {
  detailDialogVisible.value = true;
  detailLoading.value = true;
  try {
    const res = await getDeviceDetail(id, 1);
    // console.log(res);
    Object.assign(detailData.value, res.data);
  } finally {
    detailLoading.value = false;
  }
};

const handleEditCapacity = (row: any) => {
  if (detailData.value.status === 2) {
    ElMessage.warning('在线状态的设备无法修改通道容量');
    return;
  }
  // 从库存信息中查找对应通道的库存
  const stockInfo = detailData.value.deviceStock?.find((stock) => stock.channelId === row.id);
  capacityDialogVisible.value = true;
  Object.assign(capacityForm, {
    id: row.id,
    channelNo: row.channelNo,
    channelPosition: row.channelPosition,
    maxCapacity: row.maxCapacity,
    currentStock: stockInfo?.stockQuantity || 0
  });
};

const submitCapacityForm = async () => {
  capacityLoading.value = true;
  try {
    await capacityFormRef.value?.validate();
    const formData: ChannelForm = {
      id: capacityForm.id,
      deviceId: detailData.value.id!,
      channelNo: capacityForm.channelNo,
      channelPosition: capacityForm.channelPosition,
      channelType: 1, // 默认普通通道
      maxCapacity: capacityForm.maxCapacity,
      status: 1 // 默认正常状态
    };
    await updateChannel(formData);
    ElMessage.success('修改成功');
    capacityDialogVisible.value = false;
    // 重新获取详情数据
    const res = await getDeviceDetail(detailData.value.id!, 1);

    Object.assign(detailData.value, res.data);
  } finally {
    capacityLoading.value = false;
  }
};

const handleCloseChannelDialog = () => {
  channelDialogVisible.value = false;
  channelFormRef.value?.resetFields();
};

const handleCloseCapacityDialog = () => {
  capacityDialogVisible.value = false;
  capacityFormRef.value?.resetFields();
};

const handleGoToStatus = () => {
  router.push('/vending/status');
};

const handleGoToChannel = () => {
  router.push('/vending/channel');
};

const handleGoToStock = () => {
  router.push('/vending/stock');
};

// 添加分组计算属性
const groupedDevices = computed(() => {
  const groups: Record<string, { typeName: string; devices: DeviceListItem[] }> = {};

  list.value.forEach((device) => {
    const typeCode = device.deviceType?.typeCode || 'OTHER';
    const typeName = device.deviceType?.typeName || '其他设备';

    if (!groups[typeCode]) {
      groups[typeCode] = {
        typeName,
        devices: []
      };
    }

    groups[typeCode].devices.push(device);
  });

  return groups;
});

// 维护周期相关数据
const maintenanceCycleDialogVisible = ref(false);
const maintenanceCycleForm = ref({
  maintenanceCycle: 0
});
const maintenanceCycleRules = {
  maintenanceCycle: [{ required: true, message: '请输入维护周期', trigger: 'blur' }]
};

// 处理修改维护周期
const handleEditMaintenanceCycle = () => {
  maintenanceCycleForm.value.maintenanceCycle = detailData.value.deviceStatus?.maintenanceCycle || 0;
  maintenanceCycleDialogVisible.value = true;
};

// 提交维护周期修改
const submitMaintenanceCycle = async () => {
  const formRef = maintenanceCycleFormRef.value;
  if (!formRef) return;

  await formRef.validate(async (valid) => {
    if (valid) {
      try {
        // 先检查是否存在设备状态记录
        const statusRes = await getDeviceStatus(detailData.value.id!);
        let statusData = statusRes.data;
        if (!statusData) {
          // 如果不存在，先创建状态记录
          await addDeviceStatus({
            deviceId: detailData.value.id,
            deviceNo: detailData.value.deviceNo,
            temperature: 0,
            humidity: 0,
            signalStrength: 0,
            lastOnlineTime: new Date().toISOString(),
            lastMaintenanceTime: new Date().toISOString(),
            maintenanceCycle: maintenanceCycleForm.value.maintenanceCycle
          });
        } else {
          // 如果存在，更新状态记录
          await updateDeviceStatus({
            id: statusData.id,
            maintenanceCycle: maintenanceCycleForm.value.maintenanceCycle
          });
        }

        ElMessage.success('修改成功');
        maintenanceCycleDialogVisible.value = false;
        // 刷新详情数据
        await openDetail(detailData.value.id!);
      } catch (error) {
        console.error('修改维护周期失败:', error);
        ElMessage.error('修改失败');
      }
    }
  });
};

onMounted(() => {
  getList();
  getMachineTypeList();
});

// 需要暴露给模板
defineExpose({
  channelLoading,
  capacityLoading
});

// 在 script 部分添加 watch
watch(
  () => form.imgUrl,
  (newVal) => {
    // console.log(newVal);
    if (typeof newVal === 'string') {
      form.imgUrl = String(newVal);
    }
  }
);

// 设备状态接口
interface DeviceStatus {
  temperature: number;
  humidity: number;
  signalStrength: number;
  lastOnlineTime: string;
  lastMaintenanceTime: string;
  maintenanceCycle: number;
}

// 设备详情接口
interface DeviceDetail {
  id: number;
  deviceName: string;
  deviceNo: string;
  sn: string;
  model: string;
  status: number;
  channelCount: number;
  createTime: string;
  updateTime: string;
  deviceChannel: any[];
  deviceStock: any[];
  deviceStatus?: DeviceStatus;
  deviceType?: {
    typeName: string;
    typeCode: string;
    description: string;
  };
}

// 设备查询参数接口
interface DeviceQuery {
  pageNum: number;
  pageSize: number;
  deviceNo?: string;
  deviceName?: string;
  machineTypeId?: number;
  status?: number;
}

// 设备列表项接口
interface DeviceListItem extends DeviceVO {
  deviceType?: {
    typeName: string;
    typeCode: string;
    description: string;
  };
}
</script>

<style>
.search-wrapper {
  margin-bottom: 20px;
  border-radius: 8px;
}

.device-container {
  padding: 20px;
}

.device-header {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.device-group {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.device-group:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.group-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebeef5;
}

.group-title {
  margin: 0;
  font-size: 15px;
  color: #303133;
  margin-right: 8px;
  font-weight: 600;
}

.device-card {
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
}

.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.device-card-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 200px;
}

.device-image-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f7fa;
}

.device-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  background: #fff;
}

.device-card:hover .device-image {
  transform: scale(1.05);
}

.device-status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.device-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fafafa;
  min-width: 0; /* 防止内容溢出 */
}

.device-name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.detail-item {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 12px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-item .el-icon {
  margin-right: 4px;
  font-size: 13px;
  color: #409eff;
  flex-shrink: 0;
}

.device-time {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  margin: 6px 0;
}

.time-item {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 12px;
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-item .el-icon {
  margin-right: 4px;
  font-size: 12px;
  color: #67c23a;
  flex-shrink: 0;
}

.device-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #ebeef5;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.device-actions .el-button {
  padding: 3px 6px;
  height: 22px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.device-actions .el-button:hover {
  transform: translateY(-2px);
}

.device-actions .el-icon {
  font-size: 12px;
  margin-right: 2px;
}

.image-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 30px;
  min-height: 200px;
}

.image-slot .el-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #dcdfe6;
}

.image-slot span {
  font-size: 14px;
  color: #909399;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
}

.detail-container {
  padding: 20px;
}

.detail-header {
  margin-bottom: 24px;
}

.device-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}

.device-title h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.device-basic {
  margin-top: 16px;
}

.detail-section {
  margin-top: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.section-count {
  color: #909399;
  font-size: 14px;
}

.stock-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stock-warning {
  color: #e6a23c;
  font-weight: bold;
}

.stock-danger {
  color: #f56c6c;
  font-weight: bold;
}

.warning-icon {
  color: #f56c6c;
  font-size: 14px;
  cursor: help;
}

:deep(.el-descriptions__label) {
  width: 120px;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-tag) {
  margin-right: 4px;
}

.channel-alert {
  margin-bottom: 16px;
}

.capacity-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.capacity-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.capacity-icon {
  color: #909399;
  font-size: 14px;
  cursor: help;
}

.edit-capacity-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.edit-capacity-btn:hover {
  background-color: #ecf5ff;
}

.edit-capacity-btn .el-icon {
  font-size: 14px;
}

.edit-capacity-btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.edit-capacity-btn:disabled:hover {
  background-color: transparent;
}

.empty-status {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.empty-text {
  color: #909399;
  font-size: 14px;
}

.maintenance-cycle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-text {
  color: #909399;
  font-size: 12px;
}

@media (max-width: 600px) {
  .app-container {
    padding: 2px !important;
  }
  .search-wrapper {
    margin-bottom: 12px !important;
    .el-form {
      flex-direction: column !important;
      .el-form-item {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
        .el-input,
        .el-select {
          width: 100% !important;
          font-size: 13px !important;
        }
      }
      .el-form-item:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
  .device-header {
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    .el-button {
      width: 100% !important;
      font-size: 13px !important;
      height: 32px !important;
    }
  }
  .device-group {
    margin-bottom: 12px !important;
    padding: 8px !important;
    .group-header {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px !important;
      margin-bottom: 8px !important;
      .group-title {
        font-size: 14px !important;
      }
      .el-tag {
        font-size: 11px !important;
        padding: 0 6px !important;
        height: 20px !important;
      }
    }
    .device-list {
      flex-direction: column !important;
      .device-col {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
      }
      .device-card {
        margin-bottom: 8px !important;
        .device-card-content {
          flex-direction: column !important;
          align-items: center !important;
          padding: 6px !important;
          height: auto !important;
          min-height: 160px !important;
          .device-image-wrapper {
            width: 100% !important;
            height: 120px !important;
            .device-image {
              width: 80px !important;
              height: 80px !important;
            }
            .image-slot {
              font-size: 11px !important;
              min-height: 120px !important;
              .el-icon {
                font-size: 24px !important;
                margin-bottom: 6px !important;
              }
              span {
                font-size: 12px !important;
              }
            }
            .device-status {
              top: 4px !important;
              right: 4px !important;
              .el-tag {
                font-size: 11px !important;
                padding: 0 4px !important;
                height: 18px !important;
              }
            }
          }
          .device-info {
            width: 100% !important;
            padding: 8px !important;
            .device-name {
              font-size: 14px !important;
              margin: 4px 0 !important;
            }
            .device-details {
              gap: 4px !important;
              .detail-item {
                font-size: 11px !important;
                margin-bottom: 2px !important;
                padding: 2px 4px !important;
                .el-icon {
                  font-size: 12px !important;
                  margin-right: 2px !important;
                }
                .info-icon {
                  font-size: 11px !important;
                }
              }
            }
            .device-time {
              padding: 4px 0 !important;
              margin: 4px 0 !important;
              .time-item {
                font-size: 10px !important;
                padding: 1px 4px !important;
                .el-icon {
                  font-size: 12px !important;
                  margin-right: 2px !important;
                }
              }
            }
            .device-actions {
              margin-top: 4px !important;
              padding-top: 4px !important;
              .action-row {
                flex-direction: row !important;
                gap: 2px !important;
                .el-button {
                  font-size: 11px !important;
                  padding: 0 2px !important;
                  height: 20px !important;
                  .el-icon {
                    font-size: 11px !important;
                    margin-right: 1px !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .pagination-container {
    padding: 6px 0 !important;
    margin-top: 16px !important;
    .el-pagination {
      font-size: 11px !important;
      .el-pager li {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
      }
      .el-pagination__sizes {
        font-size: 11px !important;
      }
    }
  }
  .el-dialog {
    --el-dialog-width: 80% !important;
    min-width: unset !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    .el-dialog__header {
      padding: 12px !important;
      .el-dialog__title {
        font-size: 15px !important;
      }
    }
    .el-dialog__body {
      padding: 12px !important;
      .el-form {
        .el-form-item {
          margin-bottom: 12px !important;
          .el-form-item__label {
            font-size: 13px !important;
            padding-right: 8px !important;
          }
          .el-input,
          .el-select {
            font-size: 13px !important;
          }
        }
      }
    }
    .dialog-footer {
      padding: 8px 12px !important;
      .el-button {
        font-size: 13px !important;
        padding: 0 8px !important;
        height: 28px !important;
      }
    }
  }
  .detail-container {
    padding: 8px !important;
  }
  .detail-header {
    margin-bottom: 12px !important;
    .device-title {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
      margin-bottom: 8px !important;
      h2 {
        font-size: 15px !important;
        margin: 0 !important;
      }
      .el-tag {
        font-size: 11px !important;
        padding: 0 4px !important;
        height: 18px !important;
      }
    }
    .device-basic {
      :deep(.el-descriptions) {
        .el-descriptions__header {
          margin-bottom: 6px !important;
        }
        .el-descriptions__title {
          font-size: 13px !important;
        }
        .el-descriptions__body {
          .el-descriptions__table {
            .el-descriptions__cell {
              padding: 6px !important;
              font-size: 12px !important;
            }
            .el-descriptions__label {
              width: 80px !important;
              font-size: 12px !important;
              color: #606266 !important;
            }
            .el-descriptions__content {
              font-size: 12px !important;
            }
          }
        }
      }
    }
  }
  .detail-section {
    margin-top: 12px !important;
    .section-header {
      margin-bottom: 8px !important;
      h3 {
        font-size: 13px !important;
      }
      .section-count {
        font-size: 11px !important;
      }
    }
    .channel-alert {
      margin-bottom: 8px !important;
      :deep(.el-alert__title) {
        font-size: 11px !important;
      }
    }
    .el-table {
      width: 100% !important;
      overflow-x: auto !important;
      .el-table__body-wrapper {
        overflow-x: auto !important;
      }
    }
    :deep(.el-descriptions--column-3) {
      .el-descriptions__body {
        .el-descriptions__table {
          display: table !important;
          width: 100% !important;
          table-layout: fixed !important;
          .el-descriptions__cell {
            display: table-cell !important;
            padding: 8px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
          }
          .el-descriptions__label {
            width: 90px !important;
            display: inline-block !important;
            font-size: 12px !important;
            color: #606266 !important;
          }
          .el-descriptions__content {
            display: inline-block !important;
            font-size: 12px !important;
            .maintenance-cycle {
              display: inline-flex !important;
              align-items: center !important;
              gap: 4px !important;
              white-space: nowrap !important;
              .unit-text {
                font-size: 12px !important;
                color: #606266 !important;
              }
              .el-button {
                padding: 2px 4px !important;
                height: 20px !important;
                font-size: 11px !important;
                .el-icon {
                  font-size: 11px !important;
                  margin-right: 1px !important;
                }
              }
            }
          }
        }
      }
    }
  }
  .channel-alert {
    margin-bottom: 8px !important;
    :deep(.el-alert__title) {
      font-size: 11px !important;
    }
  }
  .capacity-cell {
    .capacity-info {
      font-size: 11px !important;
      .capacity-icon {
        font-size: 11px !important;
      }
    }
    .edit-capacity-btn {
      font-size: 11px !important;
      padding: 1px 3px !important;
      .el-icon {
        font-size: 11px !important;
      }
    }
  }
  .maintenance-cycle {
    .unit-text {
      font-size: 11px !important;
      margin-left: 3px !important;
    }
  }
  .el-dialog {
    .el-dialog__header {
      padding: 10px !important;
      margin-right: 0 !important;
      .el-dialog__title {
        font-size: 14px !important;
        line-height: 1.4 !important;
      }
      .el-dialog__headerbtn {
        top: 10px !important;
        right: 10px !important;
        .el-dialog__close {
          font-size: 14px !important;
        }
      }
    }
    .el-dialog__body {
      padding: 10px !important;
      .el-form {
        .el-form-item {
          margin-bottom: 10px !important;
          .el-form-item__label {
            font-size: 12px !important;
            padding-right: 6px !important;
            line-height: 1.4 !important;
          }
          .el-form-item__content {
            .el-input,
            .el-select,
            .el-input-number {
              font-size: 12px !important;
              .el-input__wrapper {
                padding: 0 6px !important;
              }
              .el-input__inner {
                height: 28px !important;
                line-height: 28px !important;
              }
            }
            .el-radio-group {
              .el-radio {
                margin-right: 8px !important;
                .el-radio__label {
                  font-size: 12px !important;
                }
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      padding: 6px 10px !important;
      .el-button {
        font-size: 12px !important;
        padding: 0 10px !important;
        height: 28px !important;
        & + .el-button {
          margin-left: 6px !important;
        }
      }
    }
  }
  :deep(.el-table) {
    .el-table__header-wrapper {
      th {
        padding: 6px !important;
        font-size: 11px !important;
        background-color: #f5f7fa !important;
      }
    }
    .el-table__body-wrapper {
      td {
        padding: 4px !important;
        font-size: 11px !important;
      }
    }
    .el-button {
      padding: 1px 3px !important;
      font-size: 11px !important;
      .el-icon {
        font-size: 11px !important;
        margin-right: 1px !important;
      }
    }
  }
  .detail-section {
    :deep(.el-descriptions--column-3) {
      .el-descriptions__body {
        .el-descriptions__table {
          display: block !important;
          width: 100% !important;
          .el-descriptions__cell {
            display: block !important;
            width: 100% !important;
            padding: 8px !important;
            border-bottom: 1px solid #ebeef5 !important;
            &:last-child {
              border-bottom: none !important;
            }
          }
          .el-descriptions__label {
            display: block !important;
            width: 100% !important;
            font-size: 12px !important;
            color: #606266 !important;
            margin-bottom: 4px !important;
          }
          .el-descriptions__content {
            display: block !important;
            width: 100% !important;
            font-size: 12px !important;
            word-break: break-all !important;
            .maintenance-cycle {
              display: flex !important;
              flex-wrap: wrap !important;
              align-items: center !important;
              gap: 4px !important;
              .unit-text {
                font-size: 12px !important;
                color: #606266 !important;
              }
              .el-button {
                padding: 2px 4px !important;
                height: 20px !important;
                font-size: 11px !important;
                .el-icon {
                  font-size: 11px !important;
                  margin-right: 1px !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* :deep(.el-dialog) {
  --el-dialog-width: 50% !important;
  min-width: 500px !important;
  max-width: 800px !important;
} */
</style>
